<template>
  <div class="exhibition-details combground">
    <div class="container">
      <div class="breadcrumb">
        <img src="~/assets/images/breadcrumb.png" />
        当前位置：<router-link to="/exhibition" target="_blank"
          ><span style="curstor:pointer;">展览会议</span></router-link
        >
        <img src="@/assets/images/home/icon.png" alt="" />{{ info.title }}
      </div>

      <div class="content">
        <div class="page-content">
          <div class="page-head">
            <div class="title">{{ info.title || "暂无标题" }}</div>
            <div class="qr" ref="qrCodeUrl" v-show="is_show_wx"></div>
            <div class="date-and-read">
              <div class="date">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ info.create_time || '无' }}
              </div>
              <div class="read">
                <img src="~/assets/images/read.png" alt="" />
                {{ info.visit || 0 }}人已读
              </div>

              <div class="share">
                分享：
                <Popover
                  placement="top"
                  width="100"
                  height="100"
                  trigger="hover"
                >
                  <img
                    src="@/assets/images/code.png"
                    width="120px"
                    height="120px"
                    alt=""
                  />
                  <div class="menu-item vx-service" slot="reference">
                    <img class="wechat" src="~/assets/images/qq.png" alt="" />
                  </div>
                </Popover>
                <Popover
                  placement="top"
                  width="100"
                  height="100"
                  trigger="hover"
                >
                  <img
                    src="@/assets/images/code.png"
                    width="120px"
                    height="120px"
                    alt=""
                  />
                  <div class="menu-item vx-service" slot="reference">
                    <img class="wechat" src="/images/wechat1.png" alt="" />
                  </div>
                </Popover>
                <img
                  class="email"
                  src="~/assets/images/email1.png"
                  @click="dialogemail = true"
                  alt=""
                />
              </div>
            </div>
          </div>

          <div class="date-and-position">
            <div class="date">
              <img src="~/assets/images/date.png" alt="" />
              {{ info.start_time }} 至 {{ info.end_time }}
            </div>
            <div class="position">
              <img src="~/assets/images/position.png" alt="" />
              {{ info.address || "暂无" }}
            </div>
          </div>

          <div
            class="page-body"
            v-if="info.content"
            v-html="info.content.content"
          ></div>
          <div class="page-body" v-else>内容完善中...</div>

          <div class="album-list" ref="albumList">
            <div
              class="item"
              @click="openCarousel('file_one')"
              v-if="info.file_one"
            >
              <div class="mask">
                <span class="name">
                  {{ info.file_one_title || "展会相册" }}</span
                >
              </div>
              <div class="pic">
                <img :src="info.file_one[0]" class="objectCover" />
              </div>
              <div class="bottom">
                <p>
                  {{ info.file_one_title || "展会相册" }}
                </p>
                <div>
                  <span class="fleft">{{ info.file_one.length }}张</span>
                  <span class="fright">2020-12-12</span>
                </div>
              </div>
            </div>
            <div
              class="item"
              @click="openCarousel('file_two')"
              v-if="info.file_two"
            >
              <div class="mask">
                <span class="name">
                  {{ info.file_two_title || "展会相册" }}</span
                >
              </div>
              <div class="pic">
                <img :src="info.file_two[1]" class="objectCover" />
              </div>
              <div class="bottom">
                <p>
                  {{ info.file_two_title || "展会相册" }}
                </p>
                <div>
                  <span class="fleft">{{ info.file_two.length }}张</span>
                  <span class="fright">2020-12-12</span>
                </div>
              </div>
            </div>
            <div
              class="item"
              @click="openCarousel('file_three')"
              v-if="info.file_three"
            >
              <div class="mask">
                <span class="name">
                  {{ info.file_three_title || "展会相册" }}</span
                >
              </div>
              <div class="pic">
                <img :src="info.file_three[0]" class="objectCover" />
              </div>
              <div class="bottom">
                <p>
                  {{ info.file_three_title || "展会相册" }}
                </p>
                <div>
                  <span class="fleft">{{ info.file_three.length }}张</span>
                  <span class="fright">2020-12-12</span>
                </div>
              </div>
            </div>
            <div class="carousel" v-show="showCarousel" :style="{ left }">
              <m-carousel
                height="350px"
                :imgs="carouselPic"
                :title="carouselTit"
                @close="showCarousel = false"
              />
            </div>
          </div>
          <div class="btns" v-if="info.cid == 1">
            <m-button
              width="235"
              style="margin-right: 15px"
              :class="info.is_expire ? 'dateOut' : ''"
              @click.stop="join(info.exhibition_id, 1, info.is_expire)"
              >登记为观众</m-button
            >
            <m-button
              width="235"
              :class="info.is_expire ? 'dateOut' : ''"
              @click.stop="join(info.exhibition_id, 2, info.is_expire)"
              >登记为展商</m-button
            >
          </div>
          <div class="btns" v-if="info.cid == 2">
            <m-button
              width="235"
              style="margin-right: 15px"
              :class="info.is_expire ? 'dateOut' : ''"
              @click.stop="join(info.exhibition_id, 3, info.is_expire)"
              >报名</m-button
            >
          </div>

          <div class="page-footer">
            <p
              v-if="prev !== null"
              class="prev"
              @click="prevNext(prev.exhibition_id)"
            >
              上一篇：{{ prev.title }}
            </p>
            <p
              v-if="next !== null"
              class="next"
              @click="prevNext(next.exhibition_id)"
            >
              下一篇：{{ next.title }}
            </p>
          </div>
        </div>
        <!-- 上一篇下一篇 -->
        <div class="page-others">
          <div class="page-prev" v-if="prev !== null">
            <div class="btn" @click="prevNext(prev.exhibition_id)">上一篇</div>
            <div class="body">
              <img :src="prev && prev.image_input" alt="" />
              <div class="title">{{ prev && prev.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ prev && prev.create_time }}
              </div>
            </div>
          </div>
          <div class="page-next" v-if="next !== null">
            <div class="btn" @click="prevNext(next.exhibition_id)">下一篇</div>
            <div class="body">
              <img :src="next && next.image_input" alt="" />
              <div class="title">{{ next && next.title }}</div>
              <div class="time">
                <img src="~/assets/images/time.png" alt="" />
                时间：{{ next && next.create_time }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 邮箱弹窗 -->
    <email-dialog v-model="dialogemail" :title="title">
      <m-form :model="emailData" style="width: 439px">
        <m-form-item label="邮箱" prop="mobile">
          <m-input
            v-model="emailData.email"
            type="email"
            placeholder="请输入邀请企业邮箱地址"
          />
        </m-form-item>
        <m-form-item label="内容" prop="password">
          <m-input
            v-model="emailData.content"
            placeholder="请输入邀请内容详情"
            type="textarea"
          />
        </m-form-item>
        <m-form-item>
          <div style="display: flex; justify-content: center">
            <m-button width="235" @click="handleEmail">确定</m-button>
          </div>
        </m-form-item>
      </m-form>
    </email-dialog>
  </div>
</template>

<script>
import MButton from "@/components/common/m-button/MButton";
import MCarousel from "@/components/common/m-carousel/MCarousel";
import MForm from "@/components/common/m-form/MForm";
import MFormItem from "@/components/common/m-form/MFormItem";
import MInput from "@/components/common/m-input/MInput";
import emailDialog from "@/components/emailDialog.vue";
import QRCode from "qrcodejs2";
import { getExhibitionDe, joinExhibition, getEmailSet } from "@/request/api";
import { Popover } from "element-ui";

export default {
  name: "ExhibitionsDetails",
  components: {
    MButton,
    MCarousel,
    emailDialog,
    MForm,
    MFormItem,
    MInput,
    Popover
  },
  data() {
    return {
      id: "",
      info: {},
      prev: {},
      next: {},
      showCarousel: false,
      carouselPic: [],
      carouselTit: "",
      left: "",
      is_show_wx: false,
      dialogemail: false,
      title: "分享邮箱",
      emailData: {}
    };
  },
  created() {
    this.getInfo();
    this.$nextTick(() => {
      this.creatQrCode();
    });
  },
  methods: {
    prevNext(id) {
      this.$router.push("/exhibition/exhibition-details/" + id);
      this.getInfo();
    },
    share(type) {
      //qq好友接口的传参
      if (type === "qq") {
        window.open(
          "http://connect.qq.com/widget/shareqq/index.html?url=" +
            document.location.href +
            `?sharesource=qzone&title=${this.info.title}&pics=${this.info.image_input}&summary=${this.info.content}`
        );
      }
    },
    join(id, type, is_expire) {
      if (is_expire) {
        return this.$message.warning("该活动已过期");
      }
      joinExhibition({
        id: id,
        record: type
      }).then(() => {
        this.$message.success("提交成功");
      });
    },
    openCarousel(name) {
      if (name == "file_one") {
        this.carouselPic = this.info.file_one;
        this.carouselTit = this.info.file_one_title;
      } else if (name == "file_two") {
        this.carouselPic = this.info.file_two;
        this.carouselTit = this.info.file_two_title;
      } else if (name == "file_three") {
        this.carouselPic = this.info.file_three;
        this.carouselTit = this.info.file_three_title;
      }
      this.showCarousel = true;
    },
    getInfo() {
      this.id = this.$route.params.id;
      getExhibitionDe(this.id).then(res => {
        this.info = res.data.data || {};
        let endtime = this.$common.timeToTimestamp(this.info.end_time);
        this.info.is_expire =
          Date.parse(new Date()) / 1000 > endtime ? true : false;
        this.prev = res.data.prev;
        this.next = res.data.next;
      });
    },
    creatQrCode() {
      let qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: window.location.href,
        width: 80,
        height: 80,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    async handleEmail() {
      const res= await getEmailSet(this.emailData)
      try {
        if(res.status === 200) {
          this.$message.success(res.message)
        }else {
          this.$message.warning(res.message)
        }
        this.dialogemail = false;
      } catch(err) {
        this.dialogemail = false;
        this.$message.error(err.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

/deep/ .carousel {
  z-index: 99 !important;
}

.exhibition-details {
  color: #666;
  padding-top: 50px;
  padding-bottom: 80px;

  .breadcrumb {
    padding-bottom: 50px;
    display: flex;
    align-items: center;

    img {
      margin-right: 5px;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .page-content {
      width: 73%;
      background-color: #fff;
      padding: 30px;

      .page-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: solid 1px rgb(238, 238, 238);
        position: relative;

        .title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 30px;
        }

        .qr {
          position: absolute;
          top: -31px;
          right: 13px;
        }

        .date-and-read {
          width: 100%;
          color: #969696;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 30px;

          .date,
          .read {
            display: flex;
            align-items: center;
            margin-right: 15px;

            img {
              margin-right: 5px;
            }
          }

          .share {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;

            .qq,
            .wechat,
            .email {
              margin-left: 5px;
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
      }

      .date-and-position {
        height: 55px;
        background-color: rgb(243, 244, 247);
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .date,
        .position {
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
          }
        }
      }

      .page-body {
        padding: 15px 30px;
      }

      .btns {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;

        .dateOut {
          /deep/ .el-button {
            background: #888 !important;
          }
        }
      }

      .page-footer {
        padding: 15px 30px;
        border-top: solid 1px rgb(238, 238, 238);
        cursor: pointer;

        p {
          display: block;
          margin-bottom: 15px;

          &:hover {
            color: $theme-color-1;
          }
        }
      }
    }

    .page-others {
      width: 300px;

      .page-prev,
      .page-next {
        height: 370px;
        background-color: #fff;
        font-size: 14px;

        .btn {
          height: 48px;
          line-height: 48px;
          color: #fff;
          text-align: center;
          cursor: pointer;
        }

        .body {
          padding: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          > img {
            width: 245px;
            height: 172px;
            margin-bottom: 15px;
          }

          .title {
            height: 42px;
            @include text-omitted(2);
            font-size: 16px;
            margin-bottom: 20px;
          }

          .time {
            display: flex;

            img {
              margin-right: 5px;
            }
          }
        }
      }

      .page-prev {
        margin-bottom: 30px;

        .btn {
          background-color: $theme-color-1;
        }
      }

      .page-next {
        .btn {
          background-color: rgb(0, 133, 232);
        }
      }
    }
  }
}

/deep/ .album-list {
  margin: -10px;
  margin-bottom: 30px;
  position: relative;

  .item {
    width: calc((100% - 60px) / 3);
    height: 200px;
    background-color: #fff;
    margin: 10px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    box-shadow: -1px 1px 2px -1px #dddddd;

    &:hover {
      .mask {
        visibility: visible;
      }
    }

    .mask {
      height: 135px;
      background-color: rgba(0, 0, 0, 0.4);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;

      .name {
        color: #fff;
        width: 90%;
        height: 85%;
        border: dashed 1px #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .pic {
      height: 135px;
      background-color: pink;
    }

    .bottom {
      background-color: #f3f4f8;
      height: 200px - 135px;
      text-align: center;
      font-size: 14px;

      p {
        padding: 10px 0;
      }

      div {
        padding: 0 10px;

        span {
          font-size: 12px;
          color: #919193;
        }

        .fleft {
          float: left;
        }

        .fright {
          float: right;
        }
      }
    }
  }

  .carousel {
    width: 99vw;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    margin-top: -250px;
    left: 0;
  }
}
</style>
